<script setup>
// https://echarts.apache.org/zh/index.html

// 优秀的echarts
// http://k21vin.gitee.io/front-end-data-visualization/#/eCharts/datavReportDev

// import chinaMap from '@/assets/chinaMap.js' // 引入中国地图数据
// import 'echarts'
// import { registerMap } from 'echarts/core'
// import echarts from 'vue-echarts'
// registerMap('china', chinaMap);

const list = [
  {
    "name": "深圳",
    "value": [114.271522, 22.753644],
    "sales": "2台",
    "text": "机器人1"
  },
  {
    "name": "南京",
    "value": [118.46, 32.02],
    "sales": "2台",
    "text": "机器人1"
  },
  {
    "name": "重庆",
    "value": [106.54, 29.59],
    "sales": "1台",
    "text": "机器人1"
  },
  {
    "name": "北京",
    "value": [116.24, 39.55],
    "sales": "30台",
    "text": "机器人1"
  },
  {
    "name": "荆州",
    "value": [113.41, 29.59],
    "sales": "2台",
    "text": "机器人1"
  }
];
const option = {
  //设置一个标题
  title: {
    text: '设备销量',
    x: 'center',
    textStyle: {
      color: '#fff',
      fontSize: "40"
    }
  },
  //鼠标划过省份下弹框
  tooltip: {
    show: true,
    triggerOn: 'click'//点击生效
  },
  geo: {
    map: 'china',//必须写
    roam: false,// 拖拽功能；自选关闭开启
    zoom: 1.235,//地图缩放比例
    center: [105, 36],//地图位置
    //地图省份的样式；包括板块颜色和边框颜色
    itemStyle: {
      areaColor: '#f5f2f2',
      borderColor: "#835f5f",
    },
    //省份字体样式；包括是否展示，字体大小和颜色
    label: {
      normal: {
        show: true,
        fontSize: "11.5",
        color: "rgb(107,102,102)"
      }
    },
    //鼠标划过的高亮设置；包括省份板块颜色和字体等
    emphasis: {
      itemStyle: {
        areaColor: '#d0a3a3',
      },
      label: {
        show: true,
        color: "rgb(255,255,255)"
      }
    }
  },
  series: [
    //我们的散点
    {
      name: '销量',
      type: 'scatter',
      coordinateSystem: 'geo',//坐标系统
      data: list,
      //地图点的样式；颜色，大小
      symbolSize: 12,
      itemStyle: {
        color: "#f13434",
        shadowBlur: 2,
        shadowColor: "#333"
      },
      //鼠标点击散点的下弹框
      tooltip: {
        show: true,
        triggerOn: "click",
        formatter: function (data1) {
          let data2 = data1.data;
          return "<b>销量<b><br>" + data2.name + data2.sales
        }
      },
    },
    //涟漪特效
    {
      name: "产品销量",
      type: "effectScatter",
      coordinateSystem: "geo",
      data: list,//传入的地图点数据
      symbolSize: function (params, raw) {
        return  parseInt(raw.data.sales);
      },//涟漪大小
      showEffectOn: "render",
      //涟漪效应
      rippleEffect: {
        brushType: "stroke",
        color: "#f13434",
        period: 10,//周期
        scale: 10//规模
      },
      hoverAnimation: true,//悬停动画
      //地图点样式
      label: {
        formatter: "{b}",
        position: "top",
        show: true,
        fontSize: "10",
      },
      itemStyle: {
        color: "#f13434",
        shadowBlur: 2,
        shadowColor: "#333"
      },
      //鼠标点击散点的下弹框
      tooltip: {
        show: true,
        triggerOn: "click",
        formatter: function (data1) {
          let data2 = data1.data;
          return "<b>销量<b><br>" + data2.name + data2.sales
        }
      },
      zlevel: 1
    }
  ]
};

const showLabel = (param) => {
  console.log('=================param', param);
  let data = param.data;
  if (data) {
    console.log("城市：" + data.name + ";坐标：" + data.value + ";销量：" + data.sales);
  }
};
</script>

<template>
  <v-chart :option="option" @click="showLabel"></v-chart>
</template>
